<template>
  <div class="flex-v flex" style="height: 100%">
    <div @click="goBack" class="flexBack">
      <img src="../../assets/image/zxl/fanhui.png" style="width: 8px; height: 12px; margin-right: 4px" />
      <span>返回</span>
    </div>
    <div class="infoBox">
      <div class="bottomBox">
        <div class="flex width100 borderbottomea paddingbottom20 box-align-center">
          <div class="zi1 flex">发起解约</div>
        </div>
        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img28.png" alt="" />
          <div class="zi2">请确认以下解约文件</div>
        </div>


   

         <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img28.png" alt="" />
          <div class="zi2">请选择解约原因 </div>
          <div class="font13 color999">（系统将根据解约原因自动生成解约协议）</div>
        </div>
          <el-form ref="ruleFormRef" label-position="right" label-width="120px" :model="formadd" :rules="rules" class="form-inline mt20">
            <div class="flex flex-v " style="width: 40%">
              <el-form-item class="" label="解约原因:">
                <el-select v-model="formadd.type" placeholder="请选择合同类型" @change="changeType">
                  <el-option key="1" label="入职签署" value="入职签署" />
                  <el-option key="2" label="到期续签" value="到期续签" />
                  <el-option key="3" label="规章制度签署" value="规章制度签署" />
                  <el-option key="4" label="调岗签署" value="调岗签署" />
                  <el-option key="4" label="离职签署" value="离职签署" />
                  <el-option key="4" label="自定义签署" value="自定义签署" />
                </el-select>
              </el-form-item>
            </div>
          </el-form>
      </div>
    </div>

    <div class="bottomdiv mt20 flex box-align-center justify-content-end">
      <el-button type="primary" size="mini" color="#01509f" style="font-size: 15px" @click="add" class="mr20">下一步</el-button>
    </div>
  </div>

  <ChooseUser v-model="showDialog" @submit-item="handleSuccess" />
  <ChooseUser1 v-model="showDialog1" @submit-list="handleSuccess1" />
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from "@/TUIKit/adapter-vue";
  import { useRouter, useRoute } from "vue-router";

  import type { TabsPaneContext, ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
  import { user_delete, invite_sms } from "@/api/cf";
  import { become_handle, resign_handle, set_enable, user_info } from "@/api/xl";
  import ChooseUser from "@/components/ChooseUser.vue";
  import ChooseUser1 from "@/components/ChooseUser1.vue";


  const basicCom = ref(null);
  const entryCom = ref(null);
  const jobCom = ref(null);
  const resignCom = ref(null);
  const router = useRouter();
  const route = useRoute();
  onMounted(() => {});
  const loading = ref(false);
  // const activeName = ref('one')
  const ruleFormRef = ref(null);
  const formadd = ref({
    name: "",
    type: route.params.name ? route.params.name : "",
    become_time: "",
    time: "",
    qixian: "",
    qixianzdy: "",
    become_desc: "",
    resign_time: "",
    resign_type: "",
    resign_reason: "",
    resign_desc: "",
    jiezhitime: "",
  });
  const showDialog = ref(false);

  const showDialog1 = ref(false);
  const list = ref([]);
  const goBack = () => {
     //router.push({ name: 'employeeList' });
  router.back()
  };

  const rules = reactive<FormRules>({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
    become_time: [{ required: true, message: "请选择转正日期", trigger: "change" }],
  });

  const rules1 = reactive<FormRules>({
    name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
    hired_time: [{ required: true, message: "请选择入职日期", trigger: "change" }],
    resign_time: [{ required: true, message: "请选择离职日期", trigger: "change" }],
    resign_type: [{ required: true, message: "请选择离职类型", trigger: "change" }],
    resign_reason: [{ required: true, message: "请选择离职原因", trigger: "change" }],
  });

  onMounted(() => {
    if (formadd.value.type == "规章制度签署" || formadd.value.type == "自定义签署") {
      list.value = [{ zhuti: "", zhenghao: "", yaoqiu: "", type: 0, name: "", phone: "", id: -1 }];
    } else {
      list.value = [{ zhuti: "某某公司", zhenghao: "1234567890", yaoqiu: "模板章", type: 0, name: "", phone: "", id: -1 }];
    }
  });
  const radioindex = ref(0);
  const addradio = index => {
    radioindex.value = index;
    console.log(radioindex.value, "sggggggg");
    showDialog.value = true;
  };

  const handleSuccess = item => {
    console.log(list.value[radioindex.value]);

    list.value[radioindex.value].name = item.name;
    list.value[radioindex.value].phone = item.mobile;
    list.value[radioindex.value].id = itme.id;
    showDialog.value = false;
  };

  const handleSuccess1 = item => {
    console.log(item);

    item.forEach(item => {
      list.value.push({
        zhuti: item.name,
        zhenghao: item.mobile,
        yaoqiu: item.name,
        type: 0,
        name: "",
        phone: "",
        id: item.id,
      });
    });
    showDialog1.value = false;
    // list.value = item;
  };
  const changeType = () => {
    if (formadd.value.type == "规章制度签署" || formadd.value.type == "自定义签署") {
      list.value = [];
    } else {
      list.value = [{ zhuti: "某某公司", zhenghao: "1234567890", yaoqiu: "模板章", type: 0, name: "", phone: "", id: -1 }];
    }
  };
  const deleteItem = row => {
    const index = list.value.findIndex(item => item.id === row.id);
    if (index !== -1) {
      list.value.splice(index, 1);
    }
  };
  const add = () => {
    const data = {
      zhuti: "个人",
      zhenghao: "1234567890",
      yaoqiu: "模板章",
      type: 1,
      name: "",
      phone: "",
      id: list.value.length + 1,
    };
    list.value.push(data);
  };

  const getUserInfo = () => {
    user_info(userId).then(res => {
      console.log(res);
      userInfo.value = res.data;
    });
  };
</script>

<style lang="scss" scoped>
.infoBox {
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.bottomdiv {
  background-color: #fff;
  width: 100%;
  height: 60px;
}

.el-table__header .table-header th {
  font-size: 16px;
  background: #f3f8fb;
  height: 53px;
  color: #6f7070;
  font-weight: normal;
}

.zi1 {
  font-size: 20px;
  color: #01509f;
  // font-family: 黑体;
  font-weight: bold;
}

.zi2 {
  font-size: 17px;
  color: #01509f;
  // font-family: 黑体;
  margin-top: -2px;
  margin-left: 4px;
}

.bottomBox {
  background-color: #fff;
  border-radius: 12px;
  padding: 17px;
  box-sizing: border-box;
  margin-top: 22px;

  .bottomTopBox {
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;

    .bottomTitle {
      font-size: 20px;
      color: #333;
      font-weight: bolder;
      flex: 1;
    }

    .bottomRightBox {
      display: flex;
      align-items: center;

      .btnItem1 {
        border-radius: 6px;
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
        // color: #333;
      }

      .btnItem2 {
        border: none;
        border-radius: 6px;
        width: 72px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
      }
    }
  }
}

.avatar-uploader {
  width: 100%;
  text-align: center;
}

.el-upload_tip {
  font-size: 15px;
  color: #999;
}

.el-upload {
  width: 100%;
}

.tishired {
  background-color: #feeeec;
  line-height: 34px;
  font-size: 14px;
  border-radius: 4px;
  padding: 0 10px;
  color: #333;
}
</style>
